import React, { Component } from 'react'
import { BasicLayout, BasicLayoutSearch } from '../../../components/BasicLayout'
import { Button, Col, Row, Progress, Tag, Steps, PageHeader, Divider, Form } from 'antd'
import { openModalMessage } from '../../../components/TableCustomize';
import { Link } from 'react-router-dom';
import * as StayGrantService from '../../../axios/StayGrant'
import { withRouter } from 'react-router';
const { Step } = Steps;
class Particulars extends Component {
    state = {
        dataParticular: {},
        percent: null
    }
    componentDidMount() {
        let data = JSON.parse(sessionStorage.getItem('particulars_acceptCode'))
        console.log('获取到详情', data, this.props);
        let code = `code=${data}`
        StayGrantService.acceptDetails(code).then((value) => {
            console.log(value);
            if (value.data.code !== 200) {
                openModalMessage('error', value.data.msg)
                return
            }
            this.setState({
                dataParticular: value.data.data,
                percent: value.data.data.process.split('%')[0]
            })
        })
    }
    componentWillUnmount() {
        this.setState = () => {
            return;
        };
    }
    render() {
        const { dataParticular, percent } = this.state
        return (
            <div>
                <BasicLayoutSearch>
                    <PageHeader
                        style={{ padding: '4px 24px' }}
                        onBack={() => window.history.back()}
                        title={'待发放物料'}>
                    </PageHeader>
                    <Divider />
                    <Row gutter={24}>
                        <Col span={6} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: "60px" }}>
                            <div>领  料  单：{dataParticular.acceptCode}</div>
                            <div>部       门：{dataParticular.departmentName}</div>
                        </Col>
                        <Col span={6} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: "60px" }}>
                            <div>批     号  ：{dataParticular.batchNo}</div>
                            <div>班     组  ：{dataParticular.groupName}</div>
                        </Col>
                        <Col span={6} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: "60px" }}>
                            <div>项      数 ：共 {dataParticular.total} 项</div>
                            <div>机      位 ：{dataParticular.seatName}</div>
                        </Col>
                        <Col span={6} style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: "60px" }}>
                            <div>发料进度</div>
                            <div>
                                <Progress percent={Number(percent)} style={{ width: '150px' }} format={(percent, successPercent) => percent + '%'} />
                            </div>
                            <div>
                                <Tag color="#d9001b">{dataParticular.isRush === 1 ? '加急' : null}</Tag>
                                <Tag color="#d9001b">{dataParticular.isLack === 1 ? '欠料' : null}</Tag>
                            </div>
                        </Col>
                    </Row>
                </BasicLayoutSearch>
                <BasicLayoutSearch>
                    <Steps direction="vertical" current={4} style={{ height: '700px' }}>
                        <Step
                            title="单据生成"
                            description={
                                <Row gutter={24}>
                                    <Col span={6}>创  建  者：{dataParticular.createPerson ? dataParticular.createPerson.createName : null}</Col>
                                    <Col span={6}>创建时间：{dataParticular.createPerson ? dataParticular.createPerson.createTime : null}</Col>
                                    <Col span={6}>部       门：{dataParticular.createPerson ? dataParticular.createPerson.departmentName : null}</Col>
                                    <Col span={6}>班     组：{dataParticular.createPerson ? dataParticular.createPerson.groupName : null}</Col>
                                </Row>
                            } />
                        <Step
                            title="单据确认"
                            description={
                                <Row gutter={24}>
                                    <Col span={6}>操 作 者：{dataParticular.confirmPerson ? dataParticular.confirmPerson.confirmName : null}</Col>
                                    <Col span={6}>创建时间：{dataParticular.confirmPerson ? dataParticular.confirmPerson.confirmDate : null}</Col>
                                    <Col span={6}>仓       库：{dataParticular.confirmPerson ? dataParticular.confirmPerson.storeName : null}</Col>
                                    <Col span={6}>班     组：{dataParticular.confirmPerson ? dataParticular.confirmPerson.groupName : null}</Col>
                                </Row>
                            }
                        />
                        <Step
                            title="物料发放"
                            description={
                                <div>
                                    {
                                        dataParticular.putPersonList ? dataParticular.putPersonList.map((value, index) => {
                                            return <Row gutter={24} key={index}>
                                                <Col span={4}>创  建  者：{value.putName}</Col>
                                                <Col span={5}>创建时间：{value.putTime}</Col>
                                                <Col span={4}>批      次：{value.batchNum}</Col>
                                                <Col span={5}>发放数量 ：共 <span style={{ color: '#007bff' }}>{value.total}</span> 项 ，完成度{value.process}</Col>
                                                <Col span={4}>接收状态 ：
                                                    {value.receiveStatus === 1 ? <span style={{ color: '#94af68' }}>{'已确认接受'}</span> : <span style={{ color: '#f9c37b' }}>{'待确认'}</span>} <br />
                                                    <Link to='/inquire' style={{ marginLeft: '100px' }}>{'>>查看详情'}</Link>
                                                </Col>
                                            </Row>
                                        }) : null
                                    }
                                </div>
                            } />
                        {
                            Number(percent) === 100 ? <Step
                                title="发放完成"
                                description={
                                    <Row gutter={24}>
                                        <Col span={6}>当前领料单流程已全部完成</Col>
                                    </Row>
                                } /> : null
                        }
                    </Steps>
                </BasicLayoutSearch>
            </div>
        )
    }
}
export default Form.create()(withRouter(Particulars))